<!-- 从业者-邀请报名-完善资料 -->
<template>
	<view class="container">
		<!-- 考证信息卡片 -->
<!-- 		<view class="info-card">
			<view class="sub-title">考证名称</view>
			<view class="info-item">
				<text class="info-label">报考城市：</text>
				<text class="info-value">福州</text>
			</view>
			<view class="info-item">
				<text class="info-label">报考等级：</text>
				<text class="info-value">四级</text>
			</view>
			<view class="info-item">
				<text class="info-label">参加培训：</text>
				<text class="info-value">是</text>
			</view>
		</view> -->

		<!-- 客服提示 -->
		<view class="tips-box">
			<u-button type="default" size="mini" :custom-style="coutomStyle" plan @click="goService"
				shape="circle">如有疑问请咨询客服助理</u-button>
			<u-button type="default" size="mini" :custom-style="coutomStyleBut" @click="goToUpload"
				shape="circle">已备好资料，去上传</u-button>
		</view>

		<!-- 分割线 -->
		<!-- <u-line color="#a8a8a8" margin="20rpx 0"></u-line> -->

		<!-- 资料准备列表 -->
		<!-- 资料准备表格 -->
		
		<view class="materials-table">
			<view class="sub-title">请先准备好以下资料：</view>
			<view class="sbinfo">
				<view class="sbinfo-left">
					<view class="material-title">1</view>
					<view class="material-name">申报信息</view>
				</view>
				<view class="sbinfo-right">
					<view class="material-desc">
						1. 明确报考等级
						2. 申请表。下载并填写申请表，打印出来后手写签名，再拍照上传电子档申请表（图片），且留存纸质稿交至考证平台  
						3. 二寸白底照片1张
					</view>
					<view class="action-buttons">
						<view class="">
							<!-- <u-link href="https://www.xzbky.com/static/kangyangtrain/baoming/1、申报表.doc">下载申请表</u-link> -->
							<view class="download-btn" @click="downloadDocument('https://www.xzbky.com/static/kangyangtrain/baoming/1、申报表.docx')">
							  <text>下载申请表</text>
							</view>
						</view>	
						<view 
							class="custom-link"
							@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/报名申请表/申报表第一张.png')">
							申请表示例1
						</view>
						<view
							class="custom-link"
							@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/报名申请表/申报表第二张.png')">
							申请表示例2
						</view>
					</view>
				</view>				
			</view>
			
			<view class="sfinfo">
				<view class="sfinfo-left">
					<view class="material-title">2</view>
					<view class="material-name">身份证件</view>
				</view>
				<view class="sfinfo-right">
					<view class="material-desc">
						身份证正反面拍照
					</view>
					<view class="action-buttons">

						<!-- <u-link href="http://www.uviewui.com">身份证示例</u-link> -->
						<view
							class="custom-link"
							@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/身份证/身份证正反面.png')">
							身份证示例
						</view>
					</view>
				</view>				
			</view>
			
			<view class="sbinfo">
				<view class="sbinfo-left">
					<view class="material-title">3</view>
					<view class="material-name">学历证明</view>
				</view>
				<view class="sbinfo-right">
					<view class="material-desc">
             包含两项： 
						 1.上传毕业证照片，若无法提供则上传学历承诺书 
						 2.大专及以上学历还需上传学信网在线验证报告
					</view>
					<view class="action-buttons">
						<view class="xiazai-content">
							<view class="download-btn" @click="downloadDocument('https://www.xzbky.com/static/kangyangtrain/baoming/3、学历承诺函.docx')">
							  <text>下载学习证明承诺书</text>
							</view>
							<!-- <u-link href="https://www.xzbky.com/static/kangyangtrain/baoming/3、学历承诺函.docx">下载学习证明承诺书</u-link> -->
							<!-- <u-link href="http://www.uviewui.com">学历承诺书示例</u-link> -->
							<view
								class="custom-link"
								@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/学历证明/学历承诺函.png')">
								学历承诺书示例
							</view>
						</view>
						<view class="shili-content">
							<view
								class="custom-link"
								@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/学历证明/毕业证书.png')">
								毕业证示例
							</view>
							<view
								class="custom-link"
								@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/学历证明/学信网在线验证报告.png')">
								学信网截图示例
							</view>
				<!-- 			<u-link href="http://www.uviewui.com">毕业证示例</u-link>
							<u-link href="http://www.uviewui.com">学信网截图示例</u-link> -->
						</view>		
					</view>
				</view>				
			</view>
			
			<view class="workinfo">
				<view class="workinfo-left">
					<view class="material-title">4</view>
					<view class="material-name">工作证明</view>
				</view>
				<view class="workinfo-right">
					<view class="workinfo-desc">
						注：报考五级无需提供此项内容 <br>
						1.优先上传工作证明+工作企业的工商信息截图（企查查） <br>
						2.如果无法提供工作证明，需上传工作经历承诺书 工作证明或工作经历承诺书均需填写好后打印，再签字拍照上传
					</view>
					<view class="workinfo-buttons">	
							<view class="workinfo-first">
					<!-- 				<view class="">
										<u-link href="https://www.xzbky.com/static/kangyangtrain/baoming/2、工作证明.docx" style="margin-right: 50rpx;">下载工作证明</u-link>
									</view>	 -->
									<view class="download-btn" @click="downloadDocument('https://www.xzbky.com/static/kangyangtrain/baoming/2、工作证明.docx')">
										<text>下载工作证明</text>
									</view>
									<!-- <u-link href="http://www.uviewui.com">工作证明示例</u-link> -->
									<view	class="custom-link"	@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/工作证明/工作证明.png')" >
										工作证明示例
									</view>
							</view>
						<view class="workinfo-first">
<!-- 							<view class="">
								<u-link href="https://www.xzbky.com/static/kangyangtrain/baoming/2、工作经历与年限承诺书(20250226).docx" style="margin-right: 50rpx;">下载工作承诺书</u-link>							
							</view> -->
							<view class="download-btn" @click="downloadDocument('https://www.xzbky.com/static/kangyangtrain/baoming/2、工作经历与年限承诺书(20250226).docx')">
								<text>下载工作承诺书</text>
							</view>
							<!-- <u-link href="http://www.uviewui.com">工作承诺书示例</u-link> -->
							<view	class="custom-link"
								@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/工作证明/工作承诺书.png')">
								工作承诺书示例
							</view>
						</view>
						<view class="workinfo-first">
							<!-- <u-link href="http://www.uviewui.com">企业工商信息示例</u-link> -->
							<view
								class="custom-link"
								@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/工作证明/企业工商信息 - 企查查.png')">
								企业工商信息示例
							</view>
						</view>						
					</view>
				</view>				
			</view>
						
			<view class="otherinfo">
				<view class="otherinfo-left">
					<view class="material-title">5</view>
					<view class="material-name">相关证书</view>
				</view>
				<view class="otherinfo-right">
					<view class="material-desc">
						报考四级及以上等级，需要上传相关专业的等级证书照片或上传上一等级养老护理员证书的照片
					</view>
					<view class="otherinfo-buttons">			
						<!-- <u-link href="http://www.uviewui.com">等级证书示例</u-link> -->
						<view
							class="custom-link"
							@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/职称或晋级证书/等级证书.png')">
							等级证书示例
						</view>
					</view>
				</view>				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 可以添加数据属性
				coutomStyle: {
					"width": "130px",
					"height": "50px",
					"white-space": "pre-wrap",
					/* 保留空白符序列 */
					"word-wrap": "break-word",
					/*, 长单词强制换行 */
					"font-size": "16px",
					"color": "#03B8CD",
					"border": "2rpx solid #03B8CD"
				},
				coutomStyleBut: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff",
					"font-size": "16px",
					"width": "180px",
					"height": "50px",
				}
			}
		},
		methods: {
			// 跳转到客服
			goService() {
				// 跳转客服页碳
				// uni.navigateTo({
				// 	url: '/pages/Institution/mine/makePhoneCall'
				// });
				uni.reLaunch({
					url: '/pages/Institution/mine/makePhoneCall'
				});
				
			},
			
			goToUpload() {
				// 跳转到上传资料页面
				// uni.navigateTo({
				// 	url: '/pages/Practitioner/perfectData/declarationInfo'
				// });
				uni.reLaunch({
					url: '/pages/Practitioner/perfectData/declarationInfo'
				});
			},
			//下载的API接口： https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile
			download(type) {
				// 下载对应类型的文件
				uni.showToast({
					title: `开始下载${type}`,
					icon: 'none'
				});
				// 这里可以添加实际的下载逻辑
			},
			showExample(type) {
				// 显示示例图片
				uni.previewImage({
					urls: [`/static/examples/${type}.jpg`],
					current: 0
				});
			},
			previewImage(imageUrl) {
				console.log('预览成功',imageUrl);
				// 确保URL格式正确
				const fullUrl = imageUrl.startsWith('http') ? imageUrl : `https://${imageUrl}`;		
						console.log('预览成功-1',fullUrl);
				// 微信小程序图片预览
				uni.previewImage({
					urls: [fullUrl], // 需要预览的图片链接列表
					current: 0, // 当前显示图片的索引
					success: () => {
						console.log('预览成功');
					},
					fail: (err) => {
						console.log('预览失败', err);
						uni.showToast({
							title: '预览失败',
							icon: 'none'
						});
					}
				});
			},
			// 下载文档方法
			downloadDocument(wordurl) {
			  const fileUrl = wordurl;
			  
			  uni.showLoading({
			    title: '下载中...',
			    mask: true
			  });
			  
			  // 1. 下载文件
			  uni.downloadFile({
			    url: fileUrl,
			    success: (downloadRes) => {
			      if (downloadRes.statusCode === 200) {
			        // 2. 保存文件到本地
			        const tempFilePath = downloadRes.tempFilePath;
			        
			        uni.saveFile({
			          tempFilePath: tempFilePath,
			          success: (saveRes) => {
			            uni.hideLoading();
			            const savedFilePath = saveRes.savedFilePath;
			            
			            // 3. 打开文档
			            uni.openDocument({
			              filePath: savedFilePath,
			              fileType: 'docx', // 支持: doc, docx, xls, xlsx, ppt, pptx, pdf
			              success: () => {
			                console.log('打开文档成功');
			              },
			              fail: (err) => {
			                console.log('打开文档失败', err);
			                uni.showToast({
			                  title: '打开文档失败',
			                  icon: 'none'
			                });
			              }
			            });
			          },
			          fail: (err) => {
			            uni.hideLoading();
			            console.log('保存文件失败', err);
			            uni.showToast({
			              title: '保存失败',
			              icon: 'none'
			            });
			          }
			        });
			      }
			    },
			    fail: (err) => {
			      uni.hideLoading();
			      console.log('下载失败', err);
			      uni.showToast({
			        title: '下载失败',
			        icon: 'none'
			      });
			    }
			  });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		background-color: #fff;
		width: 750rpx;
		// height: 2350rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header {
		margin-bottom: 30rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.info-card {
		padding: 25rpx;
		margin-bottom: 30rpx;
		// box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);		
		width: 702rpx;
		height: 250rpx;
		background: #F1F7F7;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.sub-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			color: #333;
		}

		.info-item {
			display: flex;
			margin-bottom: 15rpx;
			font-size: 28rpx;

			.info-label {
				color: #666;
				width: 150rpx;
			}

			.info-value {
				color: #333;
				font-weight: 500;
			}
		}
	}

	.tips-box {
		display: flex;
		justify-content: space-around;
		// background-color: #fff;
		border-radius: 12rpx;
		padding: 25rpx;
		margin-bottom: 10rpx;
		text-align: center;
		// box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

	}

	// 资料样式
	.materials-table {
		margin-top: 20rpx;
		
		/* 在页面的样式文件中添加 */
		/deep/ .u-table {
		  width: 100% !important;
		}
		
		.sub-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			color: #333;
		}


		.material-name {
			font-weight: bold;
			// color: #2979ff;
			margin-bottom: 10rpx;
			text-align: left;
		}

		.material-desc {
			font-size: 24rpx;
			color: #666;
			white-space: pre-line;
			line-height: 1.5;
			text-align: left;
		}

		.action-buttons {
			font-size: 8px;
			display: flex;
			flex-direction: row;
			// justify-content: space-around;
			gap: 10rpx;
			margin-bottom: 10rpx;
		}

		.download-buttons,
		.example-buttons {
			display: flex;
			// flex-direction: row;
			justify-content: space-around;
			gap: 10rpx;

		}

		.wechat-info {
			font-size: 24rpx;
			color: #999;
			margin-top: 10rpx;
		}

		/* 调整表格样式 */
		/deep/ .u-table {
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.u-tr {
				background-color: #fff;

			}

			.u-th {
				background-color: #f5f5f5;
				font-weight: bold;
				padding: 20rpx 10rpx;
			}

			.u-td {
				padding: 25rpx 15rpx;
				vertical-align: top;
			}
		}
	}
	
	// 申报信息
	.sbinfo{
		display: flex;
		width: 702rpx;
		height: 324rpx;
		background: #DDE8F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;		
		margin-bottom: 10rpx;
		
		.sbinfo-left {
			display: flex;
			flex-direction: column;
			width: 168rpx;
			height: 324rpx;
			background: #BED2EA;
			justify-content: center;
			align-items: center;
			border-radius: 16rpx 0rpx 0rpx 16rpx;
		}
		
		.material-title{
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background-color: #3C578E;
			color: white;
			font-family: Arial, sans-serif;
			font-size: 14px;
			font-weight: bold;
			line-height: 1;
		}
		
		.material-desc {
			padding: 20rpx;
			width: 482rpx;
			height: 216rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #303133;
			text-align: left;
			font-style: normal;
			text-transform: none;			
		}
		
		.action-buttons {
			padding: 20rpx;
			width: 518rpx;
			height: 44rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #038ACD;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;			
		}
	}
	
	// 身份证件
	.sfinfo {
		display: flex;
		width: 702rpx;
		height: 208rpx;
		background: #DFF0FA;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 10rpx;
		
		.sfinfo-left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 168rpx;
			height: 208rpx;
			background: #C5E0EF;
			border-radius: 16rpx 0rpx 0rpx 16rpx;
		}
		
		.material-title {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background-color: #3C578E;
			color: white;
			font-family: Arial, sans-serif;
			font-size: 14px;
			font-weight: bold;
			line-height: 1;
		}
		
		.sfinfo-right {
			
		}
		
		.material-desc {
			padding: 20rpx;
			width: 482rpx;
			height: 36rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #303133;
			text-align: left;
			font-style: normal;
			text-transform: none;	
		}
		
		.action-buttons {
			padding-top: 80rpx;
			padding-left:20rpx ;
			width: 240rpx;
			height: 44rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #038ACD;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}		
	}
	
	.workinfo {
		width: 702rpx;
		height: 422rpx;
		background: #DFF0FA;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		margin-bottom: 10rpx;
		
		.workinfo-left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 168rpx;
			height: 422rpx;
			background: #C5E0EF;
			border-radius: 16rpx 0rpx 0rpx 16rpx;
		}
		
		.material-title{
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background-color: #3C578E;
			color: white;
			font-family: Arial, sans-serif;
			font-size: 14px;
			font-weight: bold;
			line-height: 1;
		}
		
		.workinfo-desc {
			padding: 20rpx;
			width: 482rpx;
			height: 252rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #303133;
			text-align: left;
			font-style: normal;
			text-transform: none;		
		}
		
		.workinfo-buttons {
			padding: 20rpx;
			width: 518rpx;
			height: 44rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #038ACD;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;			
		}
		
		.workinfo-first{
			display: flex;
		}
		
	}
	.download-btn{
		padding-right: 8px;
	}
	
	
	.otherinfo {
		display: flex;
		width: 702rpx;
		height: 208rpx;
		background: #DFF0FA;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 10rpx;
		
		.otherinfo-left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 168rpx;
			height: 208rpx;
			background: #C5E0EF;
			border-radius: 16rpx 0rpx 0rpx 16rpx;
		}
		
		.material-title {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background-color: #3C578E;
			color: white;
			font-family: Arial, sans-serif;
			font-size: 14px;
			font-weight: bold;
			line-height: 1;
		}

		.material-desc {
			padding: 20rpx;
			width: 482rpx;
			height: 36rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #303133;
			text-align: left;
			font-style: normal;
			text-transform: none;	
		}
		
		.otherinfo-buttons {
			padding-top: 100rpx;
			padding-left:20rpx ;
			width: 240rpx;
			height: 44rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #038ACD;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}		
	}
	.custom-link {
	  color: #03B8CD;
	  // text-decoration: underline;
	  // padding: 10rpx 0;
	}
</style>